<template>
	<cl-crud @load="onLoad"></cl-crud>
</template>

<script>
import SkuCreate from './components/SkuCreate';
export default {
	name: 'sku',
	data() {
		return {
			nodes: []
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goods.specification)
				.set('table', {
					columns: [
						{
							type: 'selection',
							label: '全选',
							align: 'center',
							width: '60px'
						},
						{
							label: 'ID',
							prop: 'id',
							align: 'center',
							width: 100
						},
						{
							label: '模板名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '规格名称',
							prop: 'sort',
							align: 'center'
						},
						{
							label: '规格属性',
							prop: 'nodeDesc',
							align: 'center'
						}
					],
					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('upsert', {
					props: {
						title: '添加规格模板',
						width: '950px',
						labelWidth: '120px'
					},
					items: [
						{
							prop: 'name',
							label: '模板名称：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入属性规格名',
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '属性规格名不能为空'
								}
							]
						},
						{
							prop: 'nodes',
							label: '规格内容：',
							component: SkuCreate,
							rules: [
								{
									validator: (rule, value, callback) => {
										if (!value) {
											callback(new Error('规格不能为空'));
										} else {
											let arr = JSON.parse(value);
											let flag = true;
											arr.forEach(item => {
												if (!item.name) {
													flag = false;
													callback(new Error('规格名不能为空'));
												}
												item.desc.forEach(desc => {
													if (!desc.name) {
														flag = false;
														callback(new Error('规格值不能为空'));
													}
												});
											});
											if (flag) {
												callback();
											}
										}
									},
									required: true
								}
							]
						}
					]
				})
				.set('layout', [
					['slot-top'],
					['refresh-btn', 'add-btn', 'slot-btn', 'slot-filter', 'flex1', 'search-key'],
					['slot-plat'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', (isEdit, form) => {
					if (isEdit) {
						this.nodes = form.nodes;
						app.setForm(
							'nodes',
							JSON.stringify({
								operate: 'edit',
								nodes: form.nodes
							})
						);
					}
				})
				.on('submit', (isEdit, data, { next, done }) => {
					if (isEdit) {
						let nodes = JSON.parse(data.nodes);
						nodes.forEach(async nodesItem => {
							let desc = [];
							nodesItem.desc.forEach(descItem => {
								desc.push(descItem.name);
							});
							if (nodesItem.id) {
								next({
									id: nodesItem.id,
									name: nodesItem.name,
									desc: desc.join(',')
								});
							} else {
								this.$service.goods.specification
									.add({
										parentId: data.id,
										name: nodesItem.name,
										desc: desc.join(',')
									})
									.then(() => {
										this.refresh();
									});
							}
						});
						next({
							id: data.id,
							name: data.name
						});

						// 删除校验
						let ids = [];
						this.nodes.forEach(item => {
							let num = 0;
							nodes.forEach(nodes => {
								if (item.id === nodes.id) {
									num++;
								}
							});
							if (num === 0) {
								ids.push(item.id);
							}
						});
						if (ids.length > 0) {
							this.$service.goods.specification.delete({
								ids: ids.join(',')
							});
						}
					} else {
						this.$service.goods.specification
							.add({
								parentId: 0,
								name: data.name
							})
							.then(res => {
								let nodes = JSON.parse(data.nodes);
								nodes.forEach(async nodesItem => {
									let desc = [];
									nodesItem.desc.forEach(descItem => {
										desc.push(descItem.name);
									});
									next({
										parentId: res.id,
										name: nodesItem.name,
										desc: desc.join(',')
									});
								});
							})
							.catch(err => {
								this.$message.error(err.message);
								done();
							});
					}
				})
				.on('refresh', async (params, { next, render }) => {
					const { list } = await next(params);
					list.forEach(item => {
						let sort = [];
						let nodeDesc = [];
						item.nodes.forEach(node => {
							sort.push(node.name);
							nodeDesc.push(node.desc);
						});
						item.sort = sort.join(',');
						item.nodeDesc = nodeDesc.join(',');
					});
					render(list);
				})
				.done();
			app.refresh();
		}
	}
};
</script>

<style lang="stylus" scoped></style>
